<template>
  <div>
    <el-card
      class="box-card"
      style="
        margin: 10px 0 20px 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      "
    >
      <span>可配送区域：</span>
      <el-tag
        style="margin-right: 20px"
        @close="close(item)"
        v-for="item in tag"
        :key="item.name"
        closable
        :type="item.type"
      >
        {{ item.name }}
      </el-tag>

      <!--      @close="close(item)"  点击标签的x时候 关闭标签, element自带属性-->
      <!--      v-for="item in tag"  for循环 tag 里面的 item-->
      <!--      :key="item.name"-->
      <!--      closable-->
      <!--      :type="item.type">-->
      <!--      {{ item.name }}-->
    </el-card>

    <!-- -------------------    -------------------------------------->
    <el-card class="box-card">
      <!--是否开启配送-->
      <el-switch
        style="display: block; margin-bottom: 10px"
        v-model="value1"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text=""
        inactive-text="是否开启配送: "
      >
      </el-switch>
      <!--     div 配送区域&选择区域-->
      <div style="display: flex; justify-content: flex-start; width: 100%">
        <!--      配送区域-->
        <span style="display: block; margin: 50px 0 30px 0"> 选择区域： </span>
        <!--      选择区域-下拉框-->
        <el-form>
          <el-form-item :data="tableData" style="margin: 35px 0 0 0">
            <el-select
              @change="change"
              v-model="formInline"
              placeholder="请选择配送区域"
            >
              <el-option
                v-for="item in address"
                :key="item.id"
                :label="item.AddName"
                :value="item.AddName"
              ></el-option>
              <!--          label="山东"-->
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { PageOne2 } from "../../api/modules/pageOne";
// import api from "../../api";

export default {
  name: "",
  data() {
    return {
      tableData: [],
      address: [],
      tag: [], // 显示标签  {name: '山东', type: '', id: 0},
      value1: true, //配送开关
      formInline: "",
    };
  },
  components: {},

  async created() {
    //页面创建获取数据渲染
    // this.tag = this.address //写的真牛逼  还原成空数组
    this.tableData = await this.init();
    this.address = await this.init();
    // console.log(this.tableData)
  }, //页面创建获取数据渲染
  methods: {
    //下拉框改变监听
    change(name) {
      //清空数组
      // this.tag=[]
      //把选中的内容push到数据源显示出来
      //index 作用是想弄一个唯一值
      if (!name) {
        //防止意外情况name没有值
        return;
      }

      const index = this.tag.length;
      //判断这个城市是否已经添加过
      const status = this.tag.some((item) => item.name === name);
      //看看 this.tag 遍历里面是否存在  item.name===本次下拉框选择的内容项（name）
      //some 语法就是可以查询数据是否满足某种条件 只要有一项满足 就直接返回true 具体的可以去看百度的解释 就是个js语法
      if (status) {
        //代表tags已经有本次选择的城市了
        //tags监听是指发生改变的时候儿才会触发，从天津市又选天津市，它的值是不会发生改变的，所以他不会触发这个监听。
        this.$message.success("重复添加");

        return; //结束函数不往下走了
      }

      this.tag.push({
        name,
        type: "success",
        id: index + 1,
      });
    },
    //方法
    close(redItem) {
      // 方法1 通过id删除
      // const id=redItem.id
      // for (const [index,item] of  this.item.entries()) {//通过.entries这个属性,可以让for循环下标
      //   if (item.id===id){
      //     this.item.splice(index,1)
      //     break;
      //   }
      // }
      //方法二 通过indexOf 寻找下标删除
      //splice通过下标切除
      //v-for="item in tag"
      this.tag.splice(this.tag.indexOf(redItem), 1);
    },
    init() {
      return new Promise((red) => {
        // api.pageOne.getPageOne()
        PageOne2().then((res) => {
          let { data } = res;
          this.address = data;
          red(data);
          console.log("data", data);
        });
      });
    }, //请求数据接口初始化
  },
  mounted() {
    //挂载
  },
};
</script>

<style lang='scss' scoped></style>